import { Button, VerticalBox , HorizontalBox, ComboBox} from "std-widgets.slint";

export component App inherits Window {
    // 状态： 0-未开始 1-对方手牌配置中 2-我方手牌配置中 3-游戏中
    property <int> state: 0 ;
    in-out property <int> first: 0 ;
    VerticalBox {
        HorizontalBox { 
            text := Text {
                vertical-alignment: center;
                text: "对方手牌";
            }
            TouchArea {
                Rectangle {
                    height: 2*text.height;
                    background: lightblue;
                }
                enabled: root.state !=3 ;
                clicked => {root.state=1}
            }
            TouchArea {
                Rectangle {
                    width: self.height;
                    border-color: black;
                    border-width: 1px;
                    border-radius: self.width/2;

                    Rectangle {
                        x: parent.width/2 - 1.5px;
                        y: parent.height/2 - 1.5px;
                        visible: root.first == 0 ;
                        background: black;
                        width: 3px;
                        height: 3px;
                        border-radius: 1.5px;
                    }
                }
                Text {
                    x: parent.height;
                    text: "对方先手";
                }
            }
         }

        HorizontalBox { 
            Text {
                text: "我方手牌";
            }
            TouchArea {
                Rectangle {
                    height: 2*text.height;
                    horizontal-stretch: 1;
                    background: lightgreen;
                }
                enabled: root.state != 3;
                clicked => { root.state = 2 }
            }
         }

         HorizontalBox {
            width: 100%;
            alignment: center;

            Button {
                text: "重置";
                clicked => { root.state = 0 }
            }
            Button {
                text: "开始";
                enabled: root.state == 0;
                clicked => { root.state = 3 }
            }
            Button {
                enabled: root.state == 3;
                text: "悔一步";
            }
         }

         Rectangle {vertical-stretch: 1;}
    }
}
